
var ul = document.querySelector('.carousel-box>ul');
var ol = document.querySelector('.carousel>ol');

// 动态添加小圆点
for (i = 0; i < ul.children.length; i++) {
    var ol_li = document.createElement('li');
    ol_li.id = i;
    ol.appendChild(ol_li);
}


var arrow_left = document.getElementsByClassName('arrow-left')[0];
var arrow_right = document.getElementsByClassName('arrow-right')[0];
var ul_li_eles = ul.children;

// 左箭头单击事件
arrow_left.onclick = function () {
    var current_li = document.querySelector('.current'); // 使用 querySelector 更简便
    var index = parseInt(current_li.id);
    ul_li_eles[index].className = '';
    if (index == 0) {
        ul_li_eles[ul_li_eles.length - 1].className = 'current';
    } else {
        ul_li_eles[index - 1].className = 'current';
    }
    circle_bg();
    carousel_bg();
}


// 右箭头单击事件
arrow_right.addEventListener('click', function () {
    var current_li = document.querySelector('.current'); // 使用 querySelector 更简便
    if (current_li) {
        var index = parseInt(current_li.id);
        ul_li_eles[index].className = '';
        if (index == ul_li_eles.length - 1) {
            ul_li_eles[0].className = 'current';
        } else {
            ul_li_eles[index + 1].className = 'current';
        }
        circle_bg();
        carousel_bg();
    }
});


// 小圆点单击事件
var ol = document.getElementsByClassName('circle')[0];
var ol_li_eles = ol.children;
for (i = 0; i < ol_li_eles.length; i++) {
    ol_li_eles[i].addEventListener('click', function () {
        var current_li = document.getElementsByClassName('current')[0];
        var ul_li_eles = document.querySelectorAll('.carousel-list>li');

        if (current_li) {
            var index = parseInt(current_li.id);
            ul_li_eles[index].className = '';
            index = parseInt(this.id);
            ul_li_eles[index].className = 'current';
            circle_bg();
            carousel_bg();
        }
    });
}


// 轮播图循环
var timer = setInterval(function () {
    arrow_right.click();
    circle_bg();
    carousel_bg();
}, 3000);

document.getElementsByClassName('carousel-box')[0].addEventListener('mouseover', function () {
    window.clearInterval(timer);
});

document.getElementsByClassName('carousel-box')[0].addEventListener('mouseleave', function () {
    timer = window.setInterval(function () {
        arrow_right.click();
        circle_bg();
        carousel_bg();
    }, 3000);
});

// 动态添加小圆点背景颜色
function circle_bg() {
    for (var i = 0; i < ol_li_eles.length; i++) {
        ol_li_eles[i].style.backgroundColor = '';
    }
    var current_li = document.getElementsByClassName('current')[0];
    if (current_li) {
        var index = parseInt(current_li.id);
        ol_li_eles[index].style.backgroundColor = 'red';
    }
}

circle_bg();

// 动态添加大的背景图片
function carousel_bg() {
    var current_li = document.getElementsByClassName('current')[0];

    if (current_li) {
        var img = current_li.childNodes[0].childNodes[0];
        if (img) {
            var img_path = img.getAttribute('src');
            if (img_path) {
                var carousel_ele = document.getElementsByClassName('carousel')[0];
                if (carousel_ele) {
                    carousel_ele.style.background = 'url(' + img_path + ') no-repeat 0px 0px';
                    carousel_ele.style.backgroundSize = '1000% 1000%';
                }
            }
        }
    }
}

carousel_bg();


